<section id="main-content">
	<div class="home-main-title">
		<h1><@spring.message "home.content.title" /></h1>
	</div>
	<div class="home-articles">
		<#if articles?? && articles?size &gt; 0>
		<div class="articles-column articles-column-1 single-article">
			<article class="article-1">
				<header>
					<img src="<@spring.url '/images/${articles[0].pictureUrl!!}' />" alt="${(articles[0].title)!!}" />
					<h2 onclick="view_item('<@spring.url "/details/?id=${articles[0].id}" />');">${(articles[0].title)!!}</h2>
					<span class="small-info">${(articles[0].addedDate?string("EEEE dd MMMM 'at' hh'h'mm"))!!} - ${(articles[0].postalCode)!!} - ${(articles[0].region.name)!!}</span>
				</header>
				<div class="description">
					<p class="description-text">${(articles[0].description)!!}</p>
				</div>
			</article>
		</div>
		<div class="articles-column articles-column-2 middle-column two-articles">
		<#list 1..2 as x>
			<article class="article-${x + 1}">
				<header>
					<img src="<@spring.url '/images/${articles[x].pictureUrl!!}' />" alt="${(articles[x].title)!!}" />
					<h2 onclick="view_item('<@spring.url "/details/?id=${articles[x].id}" />');">${(articles[x].title)!!}</h2>
					<span class="small-info">${(articles[x].addedDate?string("EEEE dd MMMM 'at' hh'h'mm"))!!} - ${(articles[x].postalCode)!!} - ${(articles[x].region.name)!!}</span>
				</header>
				<div class="description">
					<p class="description-text">${(articles[x].description)!!}</p>
				</div>
			</article>
		</#list>
		</div>
		<div class="articles-column articles-column-3 two-articles">
		<#list 3..4 as x>
			<article class="article-${x + 1}">
				<header>
					<img src="<@spring.url '/images/${articles[x].pictureUrl!!}' />" alt="${(articles[x].title)!!}" />
					<h2 onclick="view_item('<@spring.url "/details/?id=${articles[x].id}" />');">${(articles[x].title)!!}</h2>
					<span class="small-info">${(articles[x].addedDate?string("EEEE dd MMMM 'at' hh'h'mm"))!!} - ${(articles[x].postalCode)!!} - ${(articles[x].region.name)!!}</span>
				</header>
				<div class="description">
					<p class="description-text">${(articles[x].description)!!}</p>
				</div>
			</article>
		</#list>
		</div>
		</#if>
	</div>
</section>